<!DOCTYPE html>
<html lang="en" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>友情链接</title>
    <header th:replace="header::html"></header>
    <script type="text/javascript" th:src="@{/sj/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/sj/layui/layui.js}"></script>
</head>

<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>门户管理</cite></a>
            <a><cite>友情链接配置</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="demoTable">
    <div class="layui-fluid">
        <div class="layui-row  layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">

                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="ftitle" id="ftitle" placeholder="请输入友情链接标题" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" data-type="reload"><i
                                    class="layui-icon">&#xe615;</i></button>

                        </div>
                    </div>
                    <div class="layui-inline" style="width: 1000px">
                        <button class="layui-btn" id="upload" style="float: right"><i
                                class="layui-icon">新增链接&#xe654;</i></button>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-hide" id="friendTable" lay-filter="friendTable"></table>
                    </div>
                    <div class="layui-card-body ">
                        <script type="text/html" id="barDemo">
                            {{#  if(d.fstatus == "未展示"){ }}
                            <a class="layui-btn layui-btn-xs" lay-event="open"
                            >展示</a>
                            {{#  } else { }}
                            <a class="layui-btn layui-btn-xs" lay-event="close"
                            >撤销</a>
                            {{#  }}}
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit"
                            >编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                            >删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="friendFrame">
    <form id="f" method="post">
        <div style="padding:50px;font-size: 15px">
            <div>请输入网址：<i id="tt" style="color: red;font-size: 12px"></i><textarea name="theurl" id="theurl" cols="50"
                                                                                   rows="1"
                                                                                   style="resize: none;font-size: 20px;border-radius: 5px"
                                                                                   onblur="rcverify(0)"></textarea>
            </div>
            <br>
            <div>请输入标题：<i id="cc" style="color: red;font-size: 12px"></i><textarea name="titles" id="titles" cols="50"
                                                                                   rows="1"
                                                                                   style="resize: none;font-size: 20px;border-radius: 5px"
                                                                                   onblur="rcverify(1)"></textarea>
            </div>
            <br>
            <div div class="layui-upload">
                <button class="layui-btn layui-btn-normal" type="button" id="r">选择文件</button>
                <br><span id="sp">选择文件</span>
                <input type="hidden" id="wantUrl">
                <div style="float: right">
                    <button type="button" class="layui-btn layui-btn-normal" id="y">确认新增</button>
                </div>
            </div>

        </div>
    </form>
</script>


</body>
<script>

	layui.use('table', function () {
		var table = layui.table;

		//第一个实例
		table.render({
			elem: '#friendTable'
			, url: '/api-back/friend/friendList' //数据接口
			, page: true //开启分页
			, limits: [10]
			, limit: 10
			, cols: [
				[ //表头
					{title: 'ID', type: 'numbers', align: 'center', width: '10%'}
					, {field: 'fid', title: '友情链接ID', align: 'center', hide: true}
					, {field: 'furl', title: '路径', align: 'center', width: '18%'}
					, {field: 'fimage', title: '图片', align: 'center', width: '12%'}
					, {field: 'ftitle', title: '标题', align: 'center', width: '20%'}
					, {field: 'fstatus', title: '状态', align: 'center', width: '10%'}
					, {toolbar: "#barDemo", title: '操作', width: "25%", align: 'center', width: '30%'}

				]
			]
		});

		//监听工具条
		table.on('tool(friendTable)', function (obj) {

			var data = obj.data;//获取点击行数据
			if (obj.event === 'open') {
				layer.confirm('确定展示该链接？', function (index) {
					$.ajax({
						url: "/api-back/friend/changeTypeBuFid",
						type: "GET",
						data: {fid: data.fid},
						dataType: 'text',
						success: function (msg) {
							if (msg === "yes") {
								layer.alert("链接展示成功", {icon: 1}, function (index1) {
									layer.close(index1);
									table.reload('friendTable');
								});

							} else if (msg === "no") {
								layer.alert("页面链接已达15个，请先下架", {icon: 1}, function (index1) {
									layer.close(index1);
									table.reload('friendTable');
								});

							} else {
								layer.open({
									type: 2,
									content: "/404.html",
									area: ['60%', '60%'],
									title: '权限不足'
								});
							}
						},
					});

				});

			} else if (obj.event === 'close') {
				//alert(555);
				layer.confirm('确定撤销该链接？', function (index) {
					$.ajax({
						url: "/api-back/friend/changeTypeBuFidClose",
						type: "GET",
						data: {fid: data.fid},
						dataType: 'text',
						success: function (msg) {
							if (msg === "yes") {
								layer.alert("链接撤销成功", {icon: 1}, function (index1) {
									layer.close(index1);
									table.reload('friendTable');
								});
							} else {
								layer.open({
									type: 2,
									content: "/404.html",
									area: ['60%', '60%'],
									title: '权限不足'
								});
							}
						},
					});

				});
			} else if (obj.event === 'edit') {
				$.ajax({
					url: '/api-back/friend/getInfoFriendLink',
					type: "GET",
					data: {fid: data.fid},
					success: function (msg) {
						backFurl = msg.furl;
						backFtitle = msg.ftitle;
						fid = msg.fid;
						opUpdata = layer.open({
							type: 1 //Page层类型
							, area: ['60%', '60%']
							, title: '修改规则'
							, shade: 0.3 //遮罩透明度
							, anim: 1 //0-6的动画形式，-1不开启
							, content: '<div style="padding:50px;font-size: 15px">\n' +
								'            <div>链接标题：<i id="ttu" style="color: red;font-size: 12px"></i><textarea name="getFtitle" id="getFtitle" cols="50" rows="1" style="resize: none;font-size: 20px;border-radius: 5px">' + backFtitle + '</textarea></div><br>\n' +
								'            <div>链接网址：<i id="ccu" style="color: red;font-size: 12px"></i><textarea name="getFurl" id="getFurl" cols="50" rows="3" style="resize: none;font-size: 20px;border-radius: 5px">' + backFurl + '</textarea></div><br>\n' +
								'            <div style="float: right"><button class="layui-btn layui-btn-xs layui-btn-radius" onclick="updataFriendLink()">提交修改</button></div>\n' +
								'        </div>'
						});
					},
					error: function (msg) {
						layer.msg("连接服务器超时，请稍后重试", {icon: 2})
					}
				})


			} else {
				//alert(777);
				layer.confirm('确定删除该链接？', function (index) {
					$.ajax({
						url: "/api-back/friend/changeTypeBuFidDelete",
						type: "GET",
						data: {fid: data.fid},
						dataType: 'text',
						success: function (msg) {
							if (msg === "yes") {
								layer.alert("删除链接成功", {icon: 1}, function (index1) {
									layer.close(index1);
									table.reload('friendTable');
								});

							} else {
								layer.open({
									type: 2,
									content: "/404.html",
									area: ['60%', '60%'],
									title: '权限不足'
								});
							}
						},
					});

				});


			}
		});


		$('.demoTable .layui-btn').on('click', function () {
			//alert("6666");
			var type = $(this).data('type');
			if (type == 'reload') {
				//执行重载
				table.reload('friendTable', {
					page: {
						curr: 1 //重新从第 1 页开始
					}
					, where: {
						ftitle: $("#ftitle").val()
					}
				});
			}
		});
	});


	function updataFriendLink() {

		var furl = $("#getFurl").val();
		var ftitle = $("#getFtitle").val();


		if (furl === backFurl && ftitle === backFtitle) {
			layer.msg("您未对标题和内容进行更改，不会为您提交至数据库", {icon: 2});
			layer.close(opUpdata);
		} else if (furl.length > 0 && ftitle.length > 0) {
			$.ajax({
				type: "GET",
				url: '/api-back/friend/changeTypeBuFidUpdate',
				data: {'fid': fid, 'furl': furl, 'ftitle': ftitle},
				success: function (msg) {
					if (msg === "yes") {
						layer.msg("修改成功", {icon: 1});
						$(".layui-laypage-btn")[0].click();
						layer.close(opUpdata);
					} else {
						layer.open({
							type: 2,
							content: "/404.html",
							area: ['60%', '60%'],
							title: '权限不足'
						});
					}
				},
				error: function (msg) {
					layer.msg("连接服务器超时，请稍后重试", {icon: 2})
				}
			});


		} else {
			layer.msg("请输入完整信息", {icon: 2})
		}
	}


</script>
<script>
	layui.use(['layer', 'jquery', 'upload', 'form'], function () {
		var layer = layui.layer;
		var upload = layui.upload;
		var $ = layui.jquery;

		$("#upload").click(function () {
			var flag = false;
			var str = layer.open({
				type: 1,
				content: $('#friendFrame').html(),
				area: ['600px', '400px'],
				title: '我要上传',
				btn: ['返回'],
				success: function () {
				}
			});
			$("#y").click(function () {
				var theurl = document.getElementById("theurl").value;
				var titles = document.getElementById("titles").value;
				if (flag === false) {
					layer.alert("请选择您要上传的文件", {icon: 5});
				} else if (theurl.length === 0 || titles.length === 0) {
					layer.alert("请将内容填写完整", {icon: 5});
				} else {
					var form = document.getElementById("f");
					var d = new FormData(form);

					$.ajax({
						type: "POST",
						url: "/api-back/picture/addPicture",
						dataType: "text",
						data: d,
						async: false,
						contentType: false,
						processData: false,
						success: function (msg) {
							if (msg === "yes") {
								layer.alert("新增成功", {icon: 1});
								layer.close(str);
								table.reload('friendTable');
							} else {
								layer.open({
									type: 2,
									content: "/404.html",
									area: ['1300px', '770px'],
									title: '权限不足'
								});
							}
						}
					});
				}
			});
			upload.render({
				elem: '#r' //绑定元素
				, auto: false
				, multiple: true
				, choose: function (obj) {
					flag = true;
					obj.preview(function (index, file, result) {
						var fileName = file.name;
						var sp = document.getElementById("sp");
						sp.innerText = fileName;
					});
				}
				, done: function (res) {
					layer.msg("新增成功！");
					table.reload('friendTable');
				}
				, error: function () {
					layer.msg("新增失败！");
				}
			});
		});

	});
</script>
</html>